<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting" :style="expendStyle">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>收费管理</a-breadcrumb-item>
        <a-breadcrumb-item>缴费详情</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="时间过滤类型">
              <a-button type="primary" @click="timeTypeChange(0)"
                >按进场时间</a-button
              >
              <a-button type="primary" @click="timeTypeChange(1)"
                >按离场时间</a-button
              >
              <a-button type="primary" @click="timeTypeChange(2)"
                >按订单时间</a-button
              >
            </el-form-item>
            <el-form-item>
              <a-button
                type="primary"
                @click="button_time(0)"
                :style="computedStyle(0)"
                >今天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(1)"
                :style="computedStyle(1)"
                >昨天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(2)"
                :style="computedStyle(2)"
                >本周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(3)"
                :style="computedStyle(3)"
                >上周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(4)"
                :style="computedStyle(4)"
                >本月</a-button
              >
            </el-form-item>
          </el-form>
          <template>
            <div style="margin: auto 50px">
              <a-range-picker
                :showTime="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                @ok="onOk"
                @change="onChange"
                :value="rangePicker()"
              />
            </div>
          </template>
        </div>
        <div class="box-condition-item">
          <el-form :inline="true" :model="formInline" class="user-search">
            <!--            <el-form-item>-->
            <!--                <el-select v-model="selectParkId"-->
            <!--                           placeholder="选择停车点"-->
            <!--                           @change="selectParkChange"-->
            <!--                           optionFilterProp="children"-->
            <!--                           mode="multiple"-->
            <!--                           showSearch-->
            <!--                           size="small"-->
            <!--                           :allowClear="true">-->
            <!--                  <el-option-->
            <!--                      v-for="p in parks"-->
            <!--                      :key="p.id"-->
            <!--                      :value="p.id">{{p.parkName}}-->
            <!--                  </el-option>-->
            <!--                </el-select>-->

            <!--            </el-form-item>-->
            <!--                        <div style="margin: 0px 10px 0px 50px">停车点</div>-->
            <template>
              <el-form-item label="停车点"></el-form-item>
              <a-select
                style="margin: 0 100px 0 0px; width: 200px"
                showSearch
                mode="multiple"
                placeholder="选择停车点"
                optionFilterProp="children"
                v-model="selectParkId"
                @change="selectParkChange"
                :allowClear="true"
              >
                <a-select-option v-for="p in parks" :key="p.id" :value="p.id"
                  >{{ p.parkName }}
                </a-select-option>
              </a-select>
            </template>
            <el-form-item>
              <el-input
                size="small"
                v-model="inputTruckSpaceName"
                placeholder="停车位编号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                size="small"
                v-model="inputUorder"
                placeholder="系统订单号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                size="small"
                v-model="inputTorder"
                placeholder="交易订单号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                size="small"
                v-model="inputImei"
                placeholder="设备编号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                size="small"
                v-model="inputPlate"
                placeholder="车牌号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <a-button type="primary" @click="plateScreen(1)">未交费</a-button>
              <a-button type="primary" @click="plateScreen(2)">已缴费</a-button>
            </el-form-item>
            <el-form-item>
              <a-button type="primary" @click="submittext">提交</a-button>
              <a-button icon="sync" @click="reset"
                >重置</a-button
              >
            </el-form-item>
          </el-form>
          <!--          <div style="margin: 0px 10px 0px 50px">停车点</div>-->
          <!--          <template>-->
          <!--            <a-select style="margin: 0 100px 0 16px; width: 200px"-->
          <!--                      showSearch-->
          <!--                      mode="multiple"-->
          <!--                      placeholder="选择停车点"-->
          <!--                      optionFilterProp="children"-->
          <!--                      v-model="selectParkId"-->
          <!--                      @change="selectParkChange"-->
          <!--                      :allowClear="true"-->
          <!--            >-->
          <!--              <a-select-option v-for="p in parks" :key="p.id" :value="p.id">{{p.parkName}}-->
          <!--              </a-select-option>-->
          <!--            </a-select>-->
          <!--          </template>-->
          <!--          <div style="margin: 0px 10px 0px 50px">停车位编号</div>-->
          <!--                              <template>-->
          <!--                                  <a-input-->
          <!--                                  style="margin:0px 20px 0 0px;width: 200px" v-model="inputTruckSpaceName"-->
          <!--                                  @change="noPlaceChange" placeholder="停车位编号"/>-->
          <!--                              </template>-->
          <!--          <template>-->
          <!--            <a-input-->
          <!--                style="margin:0px 20px 0 0px;width: 200px" v-model="inputTruckSpaceName"-->
          <!--                placeholder="停车位编号"/>-->
          <!--          </template>-->
          <!--          <div style="margin: 0px 10px 0px 50px">系统订单号</div>-->
          <!--          <template>-->
          <!--            <a-input-->
          <!--                style="margin:0px 20px 0 0px;width: 200px" v-model="inputUorder"-->
          <!--                @change="uorderChange" placeholder="系统订单号"/>-->
          <!--          </template>-->
          <!--          <div style="margin: 0px 10px 0px 50px">交易订单号</div>-->
          <!--          <template>-->
          <!--            <a-input-->
          <!--                style="margin:0px 20px 0 0px;width: 200px" v-model="inputTorder"-->
          <!--                @change="torderChange" placeholder="交易订单号"/>-->
          <!--          </template>-->
          <!--        </div>-->
          <!--        <div class="box-condition-item">-->
          <!--          <div style="margin: 0px 10px 0px 50px">设备编号</div>-->
          <!--          <template>-->
          <!--            <a-input-->
          <!--                style="margin: 0 100px 0 0px;width: 200px"-->
          <!--                v-model="inputImei" @change="deviceChange" placeholder="设备编号"/>-->
          <!--          </template>-->
          <!--          <div style="margin: 0px 40px 0px 50px">车牌号</div>-->
          <!--                              <template>-->
          <!--                                  <a-input style="margin: 0 100px 0 0px;width: 200px"-->
          <!--                                      v-model="inputPlate" @change="licenceChange" placeholder="车牌号"/>-->
          <!--                              </template>-->
          <!--          <template>-->
          <!--            <a-input style="margin: 0 100px 0 0px;width: 200px"-->
          <!--                     v-model="inputPlate" placeholder="车牌号"/>-->
          <!--          </template>-->

          <!-- 清除 -->
          <!--          <div style="margin: 0 50px">-->
          <!--            <a-button style="margin: 0 0 0 20px" @click="submittext">提交</a-button>-->
          <!--            <a-button style="margin: 0 0 0 20px" @click="reset">重置</a-button>-->
          <!--          </div>-->
        </div>
        <!--        <div class="box-expand" @click="switchExpend">点击{{isExpand ? '收起' : '展开'}}</div>-->
      </div>
    </div>

    <!-- 表单 -->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          总合计【 应收:{{ this.should }}元 &emsp;实收:{{ this.reality }}元
          优惠:{{ this.favorableAmount }}元】 &emsp;
          <a-button type="primary" @click="exportExcel" icon="download"
            >导出记录</a-button
          >
        </div>
      </div>
      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          @change="tableChange"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
        >
          <template slot="shouldMoneySlot" slot-scope="text">
            <div>{{ text == undefined || text == "" ? text : text / 100 }}</div>
          </template>
          <template slot="realityMoneySlot" slot-scope="text">
            <div>{{ text == undefined || text == "" ? 0 : text / 100 }}</div>
          </template>
          <template slot="favorableAmountSlot" slot-scope="text">
            <div>{{ text == undefined || text == "" ? 0 : text / 100 }}</div>
          </template>
          <template slot="invoicesStatus" slot-scope="text">
            <div>{{ text == 1 ? "已开票" : "未开票" }}</div>
          </template>
          <template slot="pdf" slot-scope="text">
            <div v-if="text != '' && text != undefined">
              <a :href="text" target="_Blank">发票预览</a>
            </div>
          </template>
          <!--<template slot="detail"  slot-scope="text, record">
                        <a-button @click="orderDetail(record)">订单详情</a-button>
                    </template> -->
          <!-- 脚步 -->
          <template slot="footer" v-if="dataSource.length != 0">
            <div style="display: flex; height: 30px; margin: 0 -16px">
              <div style="flex: 1 1 80%; height: 100%; padding-left: 1%">
                合计
              </div>
              <div style="flex: 1 0 6%; height: 100%; padding-left: 0.3%">
                {{ computedDue }}
              </div>
              <div style="flex: 1 0 5%; height: 100%; padding-left: 0.1%">
                {{ computedDueR }}
              </div>
              <div style="flex: 1 0 15%; height: 100%; padding-left: 0.1%">
                {{ computedDueF }}
              </div>
            </div>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 弹窗  @ok="handleOk" @cancel="cancel"-->
    <a-modal
      title="停车记录图片"
      v-model="correctPopupData.visible"
      :width="980"
      @cancel="cancelCorrect"
      :confirmLoading="correctPopupData.loading"
    >
      <div class="box-correction-popup">
        <!-- 图片 -->
        <a-carousel class="box-image" autoplay>
          <template v-for="image in correctPopupData.imageList">
            <img :key="image" :src="image" class="icon-image" />
          </template>
        </a-carousel>
      </div>
    </a-modal>
  </div>
</template>

<script>
// import Constant from '../../utils/Constant';
import moment from "moment";
import CommonApi from "../../api/CommonApi";
import ParkingRecordApi from "../../api/charge/ChargeDetail";
const columns = [
  {
    title: "车牌号",
    dataIndex: "licencePlate",
    width: "6%",
  },
  {
    title: "进场时间",
    dataIndex: "startTime",
    width: "9%",
  },
  {
    title: "离场时间",
    dataIndex: "endTime",
    width: "9%",
  },
  {
    title: "订单完成时间",
    dataIndex: "orderTime",
    width: "9%",
  },
  {
    title: "停车点",
    dataIndex: "parkName",
    width: "8%",
  },
  {
    title: "停车位编号",
    dataIndex: "truckSpaceName",
    width: "9%",
  },
  {
    title: "设备编号",
    dataIndex: "imei",
    width: "11%",
  },
  {
    title: "支付方式",
    dataIndex: "pay",
    width: "5%",
  },
  {
    title: "系统订单号",
    dataIndex: "uorder",
    width: "11%",
  },
  {
    title: "交易订单号",
    dataIndex: "torder",
    width: "11%",
  },
  {
    title: "应收款（元）",
    dataIndex: "shouldMoney",
    scopedSlots: { customRender: "shouldMoneySlot" },
    width: "6%",
  },
  {
    title: "实收款（元）",
    dataIndex: "realityMoney",
    scopedSlots: { customRender: "realityMoneySlot" },
    width: "6%",
  },
  {
    title: "优惠（元）",
    dataIndex: "favorableAmount",
    scopedSlots: { customRender: "favorableAmountSlot" },
    width: "6%",
  },
  {
    title: "开票状态",
    dataIndex: "invoicesStatus",
    scopedSlots: { customRender: "invoicesStatus" },
    width: "5%",
  },
  {
    title: "发票",
    dataIndex: "pdf",
    scopedSlots: { customRender: "pdf" },
    width: "5%",
  },
];

const dataSource = [];

const queryCondition = {
  parkID: "",
  plate: "",
  torder: "",
  uorder: "",
  targetId: "",
  imei: "",
  truckSpaceName: "",
  startTimeStamp: "",
  endTimeStamp: "",
  timeScreenCondition: 6,
  payStatus: 0,
  limit: "100",
  curr: "1",
  timeType: 0,
  //多停点list
  pID: [],
};

export default {
  name: "ChargeDteil",

  /*数据层*/
  data() {
    return {
      loading: false,
      formInline: {
        page: 1,
        limit: 10,
        machineNo: "",
        orderNo: "",
        transId: "",
        payType: 0,
        orderStatus: 0,
        token: localStorage.getItem("logintoken"),
      },

      isExpand: true,
      timeTypeStr: "按进场",
      parks: [],
      selectParkId: [],
      selectId: -1,
      momentArr: [],
      columns: columns,

      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      queryCondition,
      inputPlate: "",
      inputUorder: "",
      inputTorder: "",
      inputTruckSpaceName: "",
      inputImei: "",
      payStatus: 0,

      /* 修正弹窗 */
      correctPopupData: {
        visible: false,
        loading: false,
        id: "",
        imageList: [],
      },
      time: "",
      should: 0,
      reality: 0,
      favorableAmount: 0,
    };
  },

  /*方法层*/
  methods: {
    timeTypeChange(type) {
      if (type == 0) {
        this.timeTypeStr = "按进场";
      } else if (type == 1) {
        this.timeTypeStr = "按离场";
      } else if (type == 2) {
        this.timeTypeStr = "按订单";
      }
      this.queryCondition.timeType = 0;
      if (type != undefined) {
        this.queryCondition.timeType = type;
      }
      this.queryData();
    },
    /**表格**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },
    /*时间按钮控制*/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment()
            .week(moment().week() + 0)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() + 0)
            .endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment()
            .month(moment().month() + 0)
            .startOf("month");
          momentEnd = moment()
            .month(moment().month() + 0)
            .endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },

    rangePicker() {
      return this.momentArr;
    },

    plateScreen(sign) {
      this.queryCondition.payStatus = 0;
      if (sign != undefined) {
        this.queryCondition.payStatus = sign;
      }
      this.queryData();
    },

    reset() {
      this.loading = true;
      this.inputPlate = "";
      this.inputTruckSpaceName = "";
      this.selectParkId = [];
      this.inputImei = "";
      this.inputUorder = "";
      this.inputTorder = "";
      this.momentArr = [];
      this.queryCondition.payStatus = 0;
      this.queryData();
    },
    submittext() {
      this.queryData();
    },
    getQueryCondition() {
      let condition = this.queryCondition;
      let startTimeStamp = "";
      let endTimeStamp = "";
      condition.plate = this.inputPlate;
      condition.truckSpaceName = this.inputTruckSpaceName;
      condition.pID = this.selectParkId || [];
      condition.imei = this.inputImei;
      condition.uorder = this.inputUorder;
      condition.torder = this.inputTorder;
      // condition.payStatus=this.payStatus;
      if (this.momentArr != undefined && this.momentArr.length != 0) {
        condition.timeScreenCondition = "6";
        startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
        endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
      } else {
        condition.timeScreenCondition = "0";
      }
      condition.startTimeStamp = startTimeStamp;
      condition.endTimeStamp = endTimeStamp;
      return condition;
    },

    /* ---------------- 维度变化 -------------- */
    onChange(date) {
      this.selectId = -1;
      this.momentArr = date;
    },

    onOk() {
      this.selectId = -1;
      this.queryData();
    },

    selectParkChange() {
      this.queryData();
    },

    /* ---------------- 停车点 ---------------- */
    initParkList() {
      CommonApi.getParkList()
        .then((data) => {
          this.parks = data.data;
          console.log(1);
          console.log(this.parks);
        })
        .catch((err) => {
          console.log("error:", err);
        });
    },

    /* ---------------- 查询 ---------------- */
    queryData() {
      this.loading = true;
      let condition = this.getQueryCondition();
      // this.loading && this.loading.close(); // 这里是为了防止还没有请求结束（loading未关闭）再次连续触发
      // this.loading = Loading.service({
      //   // 这里可以直接使用选择器名称，当然也可以用ref获取DOM结构，可以提前把DOM结构缓存起来，这样频繁被触发的时候是不是就不会重新获取DOM了呢？好像可以提升一丢丢性能吧（个人理解）
      //   target: ".content",
      // });
      ParkingRecordApi.getChargeDatil(condition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data.info;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          for (var i in array) {
            if (
              array[i].endTime == null ||
              array[i].endTime == "" ||
              array[i].endTime == undefined
            ) {
              var timeD = this.getTimeDifference(
                array[i].startTime,
                this.nowTime()
              );
              array[i].sumTime = timeD;
            }
          }
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.should = data.data.should;
          this.reality = data.data.reality;
          this.favorableAmount = data.data.favorableAmount;
          // this.loading.close();
          this.loading = false;
        })
        .catch((error) => {
          console.log("获取停车记录数据异常！", error);
          this.loading = false;
        });
    },
    nowTime() {
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      var dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      return yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    getTimeDifference(startTime, endTime) {
      // let timeData={}
      var timeStr = "";
      if (startTime != null) {
        let sd = startTime.substring(0, 19).replace(/-/g, "/"); // 将时间字符串截取到秒，并将其中的-换成/
        let se = ""; // 这是定义结束时间，如果为空，就获取当前时间
        let cdate = new Date();
        if (endTime != null || endTime != "") {
          se = endTime.substring(0, 19).replace(/-/g, "/"); // 将时间字符串截取到秒，并将其中的-换成/
        } else {
          se = cdate.getTime();
        }
        let sde = new Date(se).getTime() - new Date(sd).getTime(); // 将时间字符转成时间戳
        if (sde > 1) {
          // 当有差值时，就计算
          // let a = (sde/1000 + '').split('.') // 这是获取ms
          // if(a.length>1){
          //     // timeData['ms'] = Math.floor(Number('0.'+a[1]*1000))
          //     if(Math.floor(Number('0.'+a[1]*1000)) >0){
          //         timeStr=timeStr+Math.floor(Number('0.'+a[1]*1000))+"秒"
          //     }
          // }
          // debugger
          let d = (sde / 1000 / 60 / 60 / 24 + "").split("."); // 这是获取h d
          if (Number(d[0]) != null && Number(d[0]) != "") {
            timeStr = timeStr + Number(d[0]) + "天";
          }
          // timeData['d'] = Number(d[0])  // 这是获取d
          if (d.length > 1) {
            // timeData['h'] = Math.floor(Number('0.'+d[1])*24)
            if (Math.floor(Number("0." + d[1]) * 24) > 0) {
              timeStr = timeStr + Math.floor(Number("0." + d[1]) * 24) + "小时";
            }
          }
          let c = (sde / 1000 / 60 / 60 + "").split("."); // 这是获取min
          if (c.length > 1) {
            // timeData['min'] = Math.floor(Number('0.'+c[1])*60)
            if (Math.floor(Number("0." + c[1]) * 60) > 0) {
              timeStr = timeStr + Math.floor(Number("0." + c[1]) * 60) + "分";
            }
          }
          let b = (sde / 1000 / 60 + "").split("."); // 这是获取s
          if (b.length > 1) {
            // timeData['s'] = Math.floor(Number('0.'+b[1])*60)
            if (Math.floor(Number("0." + b[1]) * 60) > 0) {
              timeStr = timeStr + Math.floor(Number("0." + b[1]) * 60) + "秒";
            }
          }
        }
      }
      return timeStr;
    },

    /* ---------------- 表格 ---------------- */
    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
          }, // 点击行
          dblclick: () => {
            this.showCorrectionPopup(record);
          },
        },
      };
    },

    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /* ---------------- 表单功能 ---------------- */
    exportExcel() {
      let condition = this.getQueryCondition();
      ParkingRecordApi.exportChargeExcel(condition)
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          link.href = URL.createObjectURL(blob);
          var fileName = decodeURIComponent(res.headers.filename);
          if (fileName == null || fileName == "undefined") {
            fileName = "缴费详情.xlsx";
          }
          link.style.display = "none";

          link.setAttribute("download", `${fileName}`);
          link.click();
          // document.body.removeChild(link) // 下载完成移除元素
          // window.URL.revokeObjectURL(link.href)
        })
        .catch((err) => {
          console.log("error");
          console.log(err);
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
        });
    },

    /* ---------------- 标题展开 ---------------- */
    switchExpend() {
      this.isExpand = !this.isExpand;
    },

    /* ---------------- 车牌纠正弹窗 ---------------- */
    showCorrectionPopup(item) {
      let { comeInUrl, getOutUrl, id } = item;
      this.correctPopupData.visible = true;
      let imageList = [];
      if (comeInUrl) {
        let array = comeInUrl.split(",").map((item) => {
          if (item != "none") {
            return item;
          }
        });
        imageList.push(...array);
      }
      if (getOutUrl) {
        let array = getOutUrl.split(",").map((item) => {
          if (item != "none") {
            return item;
          }
        });
        imageList.push(...array);
      }
      this.correctPopupData.imageList = imageList;
      this.correctPopupData.loading = false;
      this.correctPopupData.id = id;
    },

    hideCorrectionPopup() {
      this.correctPopupData.visible = false;
    },

    commitCorrect() {
      this.hideCorrectionPopup();
    },

    cancelCorrect() {
      this.hideCorrectionPopup();
    },
  },

  /*计算层*/
  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },

    expendStyle() {
      return this.isExpand ? "" : "height: 150px; overflow: hidden;";
    },
    computedDue() {
      let dataSource = this.dataSource || [];
      let result = 0;
      dataSource.forEach((item) => {
        result += isNaN(parseInt(item.shouldMoney))
          ? 0
          : parseInt(item.shouldMoney);
      });
      return result / 100;
    },
    computedDueR() {
      let dataSource = this.dataSource || [];
      let result = 0;
      dataSource.forEach((item) => {
        result += isNaN(parseInt(item.realityMoney))
          ? 0
          : parseInt(item.realityMoney);
      });
      return result / 100;
    },
    computedDueF() {
      let dataSource = this.dataSource || [];
      let result = 0;
      dataSource.forEach((item) => {
        result += isNaN(parseInt(item.favorableAmount))
          ? 0
          : parseInt(item.favorableAmount);
      });
      return result / 100;
    },
  },
  /*渲染层*/
  mounted() {
    this.button_time(0);
    this.initParkList();
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  padding-bottom: 40px;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 展开 */
.box-expand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* text */
  cursor: pointer;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  color: #020202;
  background: white;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-top: 15px;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  padding-left: 50px;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%; /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}
.user-search {
  margin-top: 20px;
}
.ant-btn {
  margin-right: 10px;
}
</style>
